<template>
  <div class="page-wrap">
    <div class="page-title">主题</div>
    <div class="page-sub-title">Demo</div>
    <div class="demo">
      <el-button @click="toggleDark()">切换主题</el-button>
    </div>
    <div class="page-sub-title">应用</div>
    <highlightjs  language="js" code="<template>
    <el-button @click='toggleDark()'>切换主题</el-button>
<template>

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
"></highlightjs>
  </div>

</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<style lang="scss">
pre code.hljs {
  font-size: 14px!important;
  font-family: auto!important;
}
.hljs{
  color: var(--el-text-color-primary);
  background-color: var(--backgroundColor2);
}
.page-wrap {
  text-align: left;
  .demo{
    border: 1px solid var(--el-border-color);
    padding: 24px;
    margin: 24px 0;
  }
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
  }
}

</style>
